import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
    Button, Menu, Dropdown, Icon, Row, Col,
    Input, InputNumber,
    Steps, Card, Popover, Badge, Table, Tooltip, Divider,
    Checkbox, Modal, Radio,
    Select, message, DatePicker, Popconfirm,
    Form, Upload, TimePicker,
    Spin
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import { routerRedux, Link } from 'dva/router';
import styles from './PhoneAccess.less';

import querystring from 'querystring';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const FormItem = Form.Item;
const { Option } = Select;
const { Description } = DescriptionList;

const { Step } = Steps;
const TextArea = Input.TextArea;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
/*
  组织架构维护-岗位维护界面
*/

@connect(({ pendingTask, }) => ({
    pendingTask,
}))
@Form.create()
export default class PhoneAccess extends PureComponent {
    state = {
        id: '',
        creditValue: 0,
        addRessValue: 0,
        homeWorkValue: 0,
        idCardValue: 0,
        conclusionValue: '',
        returnVisitDate: '-1',
        returnVisitTime: '',
        returnVisitPerson: '',
        phoneVisitsList: {},
        visitDate: false,
        visitTime: false,
        // isLoaded: false,
    };

    componentDidMount() {
        const { dispatch, location } = this.props;
        const params = querystring.parse(location.search.slice(1));

        this.setState({
            id: params.custId,
        });
        dispatch({
            type: 'pendingTask/customPhoneShow',
            payload: {
                id: params.custId
            },
            callback: () => {
                
                const { pendingTask: { customList } } = this.props;
                // console.log('call back invoked',customList);
                let name = sessionStorage.getItem("name")
                customList.phoneVisits &&
                this.setState({
                    // isLoaded: true,
                    returnVisitDate: customList.phoneVisits.visitDate,
                    returnVisitTime: customList.phoneVisits.visitTime,
                    creditValue: customList.phoneVisits.loanVerify,
                    addRessValue: customList.phoneVisits.homeVerify,
                    homeWorkValue: customList.phoneVisits.workVerify,
                    idCardValue: customList.phoneVisits.docVerify,
                    returnVisitPerson: name,
                    conclusionValue: customList.phoneVisits.note,
                })             
            }
        });
    }

    submitPhoneAccess = () => {
        if (this.state.returnVisitDate && this.state.returnVisitTime
            && this.state.creditValue && this.state.addRessValue
            && this.state.homeWorkValue && this.state.idCardValue
            && this.state.conclusionValue) {
            this.props.dispatch({
                type: 'pendingTask/savePhoneAccess',
                payload: {
                    applyId: this.state.id,
                    visitDate: this.state.returnVisitDate,
                    visitTime: this.state.returnVisitTime,
                    visitor: this.state.returnVisitPerson,
                    loanVerify: this.state.creditValue,
                    homeVerify: this.state.addRessValue,
                    workVerify: this.state.homeWorkValue,
                    docVerify: this.state.idCardValue,
                    note: this.state.conclusionValue
                },
                callback: () => {
                    this.props.dispatch( routerRedux.push(`/review/apply-details/step1`))
                }
            })
        } else {
            message.warning("请先填写完毕")
        }
    }

    onChangeTime = (time, timeString) => {
        // console.log("timeString")
        // console.log(timeString)
        this.setState({
            visitTime: !this.state.visitTime,
            returnVisitTime: timeString
        })
    }

    onChangeDate = (dates, dateString) => {        
        this.setState({
            visitDate: !this.state.visitDate,
            returnVisitDate: dateString
        })
    }

    onChangeCreditValue = (e) => {
        this.setState({
            creditValue: e.target.value,
        })
    }

    onChangeAddRessValue = (e) => {
        this.setState({
            addRessValue: e.target.value,
        })
    }

    onChangeHomeWorkValue = (e) => {
        this.setState({
            homeWorkValue: e.target.value,
        })
    }

    onChangeIdCardValue = (e) => {
        this.setState({
            idCardValue: e.target.value,
        })
    }

    onChangecConclusionValue = (e) => {
        this.setState({
            conclusionValue: e.target.value,
        })
    }

    render() {
        const { pendingTask: { customList } } = this.props;
        const { pendingTask } = this.props;
        
        // console.log('this.state.returnVisitDate=', this.state.returnVisitDate);

        return (
            <PageHeaderLayout
                title="电话回访"
            >
                <Row>
                    <Card
                        title="基本信息"
                        bordered={false}
                        style={{ marginBottom: 24 }}
                    >
                        <Row style={{ marginTop: 5 }}>
                            <DescriptionList className={styles.headerList} size="small" col="3">
                                <Description term="客户姓名">
                                    {customList.baseInfo && customList.baseInfo.custName}
                                </Description>
                                <Description term="性别">
                                    {customList.baseInfo && customList.baseInfo.sex == "1" ? "男" : "女"}
                                </Description>
                                <Description term="年龄">
                                    {customList.baseInfo && customList.baseInfo.age}
                                </Description>
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 20 }}>
                            <DescriptionList className={styles.headerList} size="small" col="3">
                                <Description term="手机号码">
                                    {customList.baseInfo && customList.baseInfo.mobile}
                                </Description>
                                <Description term="电话">
                                    {customList.baseInfo && customList.baseInfo.phone ? customList.baseInfo.phone : "无"}
                                </Description>
                                <Description term="家庭地址">
                                    {customList.baseInfo && customList.baseInfo.address}
                                </Description>
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 20 }}>
                            <DescriptionList className={styles.headerList} size="small" col="3">

                                <Description term="车型">
                                    {customList.baseInfo && customList.baseInfo.carType}
                                </Description>
                                <Description term="贷款金额">
                                    {customList.baseInfo && customList.baseInfo.loanAmount}
                                </Description>
                                <Description term="担保机构">
                                    {customList.baseInfo && customList.baseInfo.orgName}
                                </Description>
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 20 }}>
                            <DescriptionList className={styles.headerList} size="small" col="3">

                                <Description term="支行名称">
                                    {customList.baseInfo && customList.baseInfo.bankName ? customList.baseInfo.bankName : "无"}
                                </Description>
                                <Description term="业务编号">
                                    {customList.baseInfo && customList.baseInfo.bizNum}
                                </Description>
                            </DescriptionList>
                        </Row>
                    </Card>
                    <Card
                        title="回访信息"
                        bordered={false}
                        style={{ marginTop: 24 }}
                    >
                        <DescriptionList className={styles.headerList} size="small" col="3">
                            <Description term="回访人">
                                {this.state.returnVisitPerson}
                            </Description>
                            
                            <Description term="回访日期">
                                <DatePicker  
                                    allowClear={false}
                                    showToday={true} 
                                    placeholder="请选择日期"
                                    value={moment(this.state.returnVisitDate==''?null:this.state.returnVisitDate, 'YYYY-MM-DD')} 
                                    format={'YYYY-MM-DD'} 
                                    onChange={this.onChangeDate}
                                />
                            </Description>
                            
                            <Description term="回访时间">
                                <TimePicker 
                                    allowEmpty={false}
                                    placeholder="请选择时间"
                                    value={moment(this.state.returnVisitTime==''?null:this.state.returnVisitTime, 'HH:mm:ss')} 
                                    format={'HH:mm:ss'} 
                                    onChange={this.onChangeTime}
                                />
                            </Description>
                        </DescriptionList>
                    </Card>

                    <Card
                        title="情况核实"
                        bordered={false}
                        style={{ marginTop: 24 }}
                    >
                        <Row >
                            <DescriptionList className={styles.headerList} size="small" col="1">
                                <Description >
                                    已向本人核实办理信用卡分期事宜：
                                <RadioGroup value={this.state.creditValue} onChange={this.onChangeCreditValue}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={2}>否</Radio>
                                    </RadioGroup>

                                </Description>
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 20 }}>
                            <DescriptionList className={styles.headerList} size="small" col="1">
                                <Description >
                                    已向本人核实住宅地址：

                                    <RadioGroup value={this.state.addRessValue} onChange={this.onChangeAddRessValue}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={2}>否</Radio>
                                    </RadioGroup>
                                </Description>
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 20 }}>
                            <DescriptionList className={styles.headerList} size="small" col="1">
                                <Description >
                                    已向本人核实工作情况：
                                  
                                    <RadioGroup value={this.state.homeWorkValue} onChange={this.onChangeHomeWorkValue}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={2}>否</Radio>
                                    </RadioGroup>
                                </Description>
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 20 }}>
                            <DescriptionList className={styles.headerList} size="small" col="1">
                                <Description >
                                    已向本人核实有关共同借款人提供的身份证、购房合同等资料申请审批表上填写的信息：
                                <RadioGroup value={this.state.idCardValue} onChange={this.onChangeIdCardValue}>
                                        <Radio value={1}>是</Radio>
                                        <Radio value={2}>否</Radio>
                                    </RadioGroup>
                                </Description>
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 20 }}>
                            <DescriptionList col={2}>
                                <Description term="结论">
                                    <Row>
                                        <TextArea placeholder="请输入" rows={4} value={this.state.conclusionValue} onChange={this.onChangecConclusionValue} />
                                    </Row>
                                </Description >
                            </DescriptionList>
                        </Row>
                        <p style={{ marginTop: 50 }}>
                            <Button type="primary" onClick={this.submitPhoneAccess} loading={pendingTask.loading}>提交</Button>
                        </p>
                    </Card>

                </Row>
                {/* } */}
            </PageHeaderLayout>
        );
    }
}
